<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-22 13:38:40
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-01-12 10:09:47
 * @FilePath: \robot\src\views\patroling\TemplateListDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    :model-value="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <template #header>
      <div class="text-center text-3xl font-bold">{{ title }}</div>
    </template>
    <div
      v-loading="loading"
      data-test="template-list"
      class="h-96 overflow-y-scroll"
    >
      <div
        v-for="item in list"
        :key="item.id"
        data-test="template-item"
        class="border border-black border-solid rounded p-5 flex items-center justify-between cursor-pointer mb-2"
        @click="handleClick(item)"
      >
        <div>
          <div data-test="template-name" class="text-lg mb-2">
            {{ item.name }}
          </div>
          <div class="mb-2">{{ item.memo }}</div>
          <div>{{ item.createTime }}</div>
        </div>
        <div class="flex items-center">
          <component :is="checked(item.id)" class="mr-5"></component>
          <el-icon
            data-test="template-delete"
            :size="30"
            @click.stop="handleDelete(item.id)"
          >
            <Delete></Delete>
          </el-icon>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="flex">
        <div
          class="flex-1 bg-[#1f3947] text-center text-white cursor-pointer text-xl py-3 rounded mr-5"
          @click="handleClose"
        >
          取消
        </div>
        <div
          class="flex-1 bg-[#ff931e] text-center text-white cursor-pointer text-xl py-3 rounded"
          @click="handleConfirm"
        >
          确定
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { toRefs, ref, watch } from "vue";
import RadioN from "@/icons/patroling/radio_n.svg";
import RadioS from "@/icons/patroling/radio_s.svg";
import {
  getList,
  deleteMissionTemplate,
} from "@/api/robot-mission-template.js";
import { ElMessageBox, ElNotification } from "element-plus";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:visible", "confirm"]);

const { visible } = toRefs(props);

function handleClose() {
  emit("update:visible", false);
}
function handleConfirm() {
  if (!selectedTemplate.value.id) {
    ElNotification({
      type: "warning",
      title: "提醒",
      message: "请先选择模板",
    });
    return;
  }
  emit("update:visible", false);
  emit("confirm", selectedTemplate.value);
}

// 当前选择模板
const selectedTemplate = ref({});
function checked(id) {
  return id === selectedTemplate.value.id ? RadioS : RadioN;
}
/**
 * @description: 选择模板
 * @param {*} item
 * @return {*}
 */
function handleClick(template) {
  updateSelectedTemplate(template);
}

/**
 * @description: 删除模板
 * @return {*}
 */
function handleDelete(id) {
  ElMessageBox.confirm("确定要删除吗？").then(async () => {
    await deleteMissionTemplate(id);
    getTemplateList();
  });
}

const loading = ref(false);
const list = ref([]);
async function getTemplateList() {
  loading.value = true;
  const { data = [] } = await getList({ rtype: "patroling" });
  loading.value = false;
  list.value = data;
}

watch(visible, () => {
  updateSelectedTemplate({});
  if (!visible.value) return;
  getTemplateList();
});

function updateSelectedTemplate(value) {
  selectedTemplate.value = value;
}
</script>
